import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import { AtIcon } from 'taro-ui'
import './my.scss'


@inject('counterStore')
@observer
class My extends Component {

  config = {
    navigationBarTitleText: '个人中心',
    navigationBarTextStyle: 'white',
    navigationBarBackgroundColor: '#2698FF',
  }
  constructor() {
    this.state = {
      test: '11111',
      avator: require('../../img/avator.png'),
      money: require('../../img/money.png'),
      cash: require('../../img/cash.png'),
      count: require('../../img/count.png'),
    }
  }
  componentWillMount() {
    console.log('componentWillMount----');
  }

  componentWillReact() {
    console.log('componentWillReact')
  }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  increment = () => {
    const { counterStore } = this.props
    counterStore.increment()
  }

  decrement = () => {
    const { counterStore } = this.props
    counterStore.decrement()
  }

  incrementAsync = () => {
    const { counterStore } = this.props
    counterStore.incrementAsync()
  }

  render() {
    const { counterStore: { counter } } = this.props
    const { avator, cash, money,count } = this.state;
    return (
      <View className='myCenter-page'>
        <View className="myBar">
          <View className="left">
            {/* <View>点击登录账户</View> */}
            <View className="userName">Mr.辣椒</View>
            <View className="tel"><AtIcon prefixClass='icon' value='shoujihaoma' size='12' color='#fff'></AtIcon> <label>13913313037</label> <AtIcon prefixClass='icon' value='xiugai' size='12' color='#fff'></AtIcon></View>
            <View className="location"><AtIcon prefixClass='icon' value='dizhi' size='12' color='#fff'></AtIcon><label>自提点：南京市江宁区曙光小区自提点</label></View>
          </View>
          <View className="right">
            <image src={avator} alt="" />
          </View>
        </View>
        <View className="menuCard">
          <View className="item">
            <View><image src={money} alt="" /></View>
            <View className="menu-name">收益管理</View>
          </View>
          <View className="item">
            <View><image src={cash} alt="" /></View>
            <View className="menu-name">提现</View>
          </View>
          <View className="item">
            <View><image src={count} alt="" /></View>
            <View className="menu-name">个人账户</View>
          </View>
        </View>
        <View className='listItem'>
          <View><AtIcon prefixClass='icon' value='shangpinfenxiang' size='13' color='#1791FF'></AtIcon></View>
          <View className="title">商品分享</View>
          <View className="arrow"><AtIcon prefixClass='icon' value='gengduo' size='10' color='#666666'></AtIcon></View>
        </View>
        <View className='listItem'>
          <View><AtIcon prefixClass='icon' value='paihangbang' size='13' color='#1791FF'></AtIcon></View>
          <View className="title">排行榜</View>
          <View className="arrow"><AtIcon prefixClass='icon' value='gengduo' size='10' color='#666666'></AtIcon></View>
        </View>
        <View className='listItem'>
          <View><AtIcon prefixClass='icon' value='huiyuanguanli' size='13' color='#1791FF'></AtIcon></View>
          <View className="title">会员管理</View>
          <View className="arrow"><AtIcon prefixClass='icon' value='gengduo' size='10' color='#666666'></AtIcon></View>
        </View>
        <View className='listItem'>
          <View><AtIcon prefixClass='icon' value='xitongxiaoxi' size='13' color='#1791FF'></AtIcon></View>
          <View className="title">系统消息</View>
          <View className="arrow"><AtIcon prefixClass='icon' value='gengduo' size='10' color='#666666'></AtIcon></View>
        </View>
        <View className='listItem'>
          <View><AtIcon prefixClass='icon' value='tuikeguanli' size='13' color='#1791FF'></AtIcon></View>
          <View className="title">推客管理</View>
          <View className="arrow"><AtIcon prefixClass='icon' value='gengduo' size='10' color='#666666'></AtIcon></View>
        </View>
        <View className='listItem'>
          <View><AtIcon prefixClass='icon' value='wentihefankui' size='13' color='#1791FF'></AtIcon></View>
          <View className="title">问题和反馈</View>
          <View className="arrow"><AtIcon prefixClass='icon' value='gengduo' size='10' color='#666666'></AtIcon></View>
        </View>
        {/* <Button onClick={this.increment}>+</Button>
        <Button onClick={this.decrement}>-</Button>
        <Button onClick={this.incrementAsync}>Add Async</Button>
        <Text>{counter}</Text> */}
      </View>
    )
  }
}

export default My 
